{extend name="Base/base"/}

{block name="body"}
<div class="admin-main-container">
    <div class="main-title">
        <h2>
            订单管理                    </h2>
    </div>

    <div style="margin-bottom: 10px; display: block;" class="hide" id="search_form">

        <style>
            .tb_search td{
                padding: 5px 10px;
            }
        </style>
        <form id="searchForm" method="get" action="{:url()}" class="form-dont-clear-url-param">
            <div class="search-form  cf " style="margin-bottom: 10px">
                <table class="tb_search">

                    <!--判断搜索选项是TEXT还是SELECT-->
                    <tbody>
                    <tr style="line-height: 28px">
                        <td>
                            订单id
                        </td>
                        <td>
                            <input style="float: none" type="text" name="id" class="search-input form-control form-input-width" value="">
                        </td>

                    </tr><!--判断搜索选项是TEXT还是SELECT-->
                    <tr style="line-height: 28px">
                        <td>
                            收货人电话
                        </td>
                        <td>
                            <input style="float: none" type="text" name="mobile"
                                   class="search-input form-control form-input-width" value="">
                        </td>

                    </tr>
                    <tr>
                        <td><input type="submit" class="btn" value="确定"> <button class="btn ajax-post btn" onclick="toggle_search()">关闭</button></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </form>
        <div style="border-top:1px solid #ccc;border-bottom: 1px solid white"></div>
    </div>
    <!-- 按钮工具栏 -->
    <div class="with-padding">
        <div class="fl">
            <button class="btn submit-btn" url="?status=-1" target-form="ids" style="padding: 6px 16px;" onclick="toggle_search()">搜索</button>
            <a href="{:url('',array('action'=>'add'))}" class="btn btn-ajax btn-success btn">新增订单</a>
            <button class="btn ajax-post btn" url="{:url('',array('action'=>'delete'))}" target-form="ids">删除</button>&nbsp;
            <!-- 选择框select -->
            <div style="float: right;">
                <style>
                    .oneselect{
                        display: inline-block;
                        margin-left: 10px;
                    }
                    .oneselect .title{
                        float: left;
                        line-height: 32px;
                    }
                    .oneselect .select_box{
                        float: left;
                        line-height: 32px;
                    }
                    .oneselect .select_box select{
                        min-width: 200px;
                    }
                </style>
                <form id="selectForm" method="get" class="form-dont-clear-url-param">
                    <div class="oneselect">
                        <div class="title">订单状态：</div>
                        <div class="select_box">
                            <select name="order_status" data-role="select_text" class="form-control">
                                {switch name="status"}
                                {case value="0"}<option value="0" selected="">待付款</option>{/case}
                                {case value="1"}<option value="1" selected="">已付款</option>{/case}
                                {case value="2"}<option value="2" selected="">待退款</option>{/case}
                                {case value="3"}<option value="3" selected="">已退款</option>{/case}
                                {default/}<option value="">全部</option>
                                {/switch}
                                <option value="0">待付款</option>
                                <option value="1">已付款</option>
                                <option value="2">待退款</option>
                                <option value="3">已退款</option>
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div><div class="oneselect">
                    <div class="title">订单时间:</div>
                    <div class="select_box">
                        <select name="order_create_time" data-role="select_text" class="form-control">
                            {switch name="time"}
                            {case value="7"}<option value="7" selected="">一周内</option>{/case}
                            {case value="15"}<option value="15" selected="">十五天</option>{/case}
                            {case value="30"}<option value="30" selected="">一个月</option>{/case}
                            {default/}<option value="0">全部</option>
                            {/switch}
                            <option value="0">全部</option>
                            <option value="7">一周</option>
                            <option value="15">十五天</option>
                            <option value="30">一个月</option>
                        </select>
                    </div>
                </div>
                </form>
            </div>
        </div>

    </div>


    <!-- 数据表格 -->
    <div class="with-padding" stype="width:auto; overflow: auto;">
        <table id="table-data" class="table table-bordered table-striped table-hover">
            <!-- 表头 -->
            <thead>
            <tr>
                <th class="row-selected row-selected" style="width: 20px">
                    <input class="check-all" type="checkbox">
                </th>
                <th>订单id</th><th>价格</th><th>商品名称</th><th>用户昵称</th><th>用户手机</th><th>订单状态</th><th>下单时间</th><th>操作</th>

            </tr>
            </thead>

            <!-- 列表 -->

            <tbody id="tbody">
            {foreach name="list" item="vo"}
            <tr>
                <td><input class="ids row-selected" type="checkbox" name="ids" value="{$vo.id}"></td>
                <td>{$vo.id}</td>
                <td>{$vo.product_price}</td>
                <td>{$vo.product_name}</td>
                <td>{$vo.buyer_nick}</td>
                <td>{$vo.receiver_mobile}</td>
                <td>{$vo['order_status']}</td>
                <td>{$vo.order_create_time}</td>
                <td>
                    <a href="{:url('',array('action'=>'add','id'=>1))}">审核</a>
                </td>
            </tr>
            {/foreach}

            </tbody>
        </table>
    </div>
    <!-- 分页 -->
    <div class="with-padding">
    </div>

</div>
{/block}

{block name="script"}
<script type="text/javascript">
            //搜索功能
            $("#search").click(function () {
                var url = $(this).attr('url');
                var query = $('.search-form').find('input').serialize();
                query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g, '');
                query = query.replace(/^&/g, '');
                if (url.indexOf('?') > 0) {
                    url += '&' + query;
                } else {
                    url += '?' + query;
                }
                window.location.href = url;
            });
    //回车搜索
            $(".search-input").keyup(function (e) {
                if (e.keyCode === 13) {
                    $("#search").click();
                    return false;
                }
            });
    function toggle_search(){
        $('#search_form').toggleClass('hide');
    }

//    $(document).on('submit', '.form-dont-clear-url-param', function(e){
//        e.preventDefault();
//
//        var seperator = "?";
//        var form = $(this).serialize();
//        var action = $(this).attr('action');
//        if(action == ''){
//            action = location.href;
//        }
//        var new_location = action + seperator + form;
//        location.href = new_location;
//
//        return false;
//    });


</script>


<script>
    $(function(){
        //点击排序
        $('.list_sort').click(function () {
            var url = $(this).attr('url');
            var ids = $('.ids:checked');
            var param = '';
            if (ids.length > 0) {
                var str = new Array();
                ids.each(function () {
                    str.push($(this).val());
                });
                param = str.join(',');
            }
            if (url != undefined && url != '') {
                window.location.href = url + '&ids=' + param;
            }
        });
        $('[data-role="select_text"]').change(function(){

            var data = $('#selectForm').serialize();
//            $.ajax({
//                url: "{:url('')}",
//                type: 'GET',
//                data: data,
//                success: function (data) {
//                    console.log(data);
//                }
//            });
            $('#selectForm').submit();
        });
        //模态弹窗
        $('[data-role="modal_popup"]').click(function(){
            var target_url=$(this).attr('modal-url');
            var data_title=$(this).attr('data-title');
            var target_form=$(this).attr('target-form');
            if(target_form!=undefined){
                //设置了参数时，把参数加入
                var form=$('.'+target_form);
                if (form.get(0) == undefined ) {
                    updateAlert('没有可操作数据。','danger');
                    return false;
                } else if (form.get(0).nodeName == 'FORM') {
                    query = form.serialize();
                } else if (form.get(0).nodeName == 'INPUT' || form.get(0).nodeName == 'SELECT' || form.get(0).nodeName == 'TEXTAREA') {
                    query = form.serialize();
                } else {
                    query = form.find('input,select,textarea').serialize();
                }
                if(!query.length && $(this).attr('can_null') != 'true'){
                    updateAlert('没有可操作数据。','danger');
                    return false;
                }
                target_url=target_url+'&'+query;
            }
            var myModalTrigger = new $.zui.ModalTrigger({
                'type':'ajax',
                'url':target_url,
                'title':data_title
            });
            myModalTrigger.show();
        });
        $('.tox-confirm').click(function(e){
            var text = $(this).attr('data-confirm');
            var result = confirm(text);
            if(result) {
                return true;
            } else {
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();
                return false;
            }
        })
    });


    $(document).ready(function () {
        $('.popup-gallery').each(function () { // the containers for all your galleries
            $(this).magnificPopup({
                delegate: 'a',
                type: 'image',
                tLoading: '正在载入 #%curr%...',
                mainClass: 'mfp-img-mobile',
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0, 1] // Will preload 0 - before current, and 1 after the current image

                },
                image: {
                    tError: '<a href="%url%">图片 #%curr%</a> 无法被载入.',
                    titleSrc: function (item) {
                        /*           return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';*/
                        return '';
                    },
                    verticalFit: true
                }
            });
        });
    });

    $(function(){
        var reset=function(){
            if($('#main').width()-20<=$('#table-data').width()){
                $('#main').css('overflow-x','scroll');
            }else{
                $('#main').css('overflow-x','hidden');
            }
        };
        reset();
        $(window).resize(reset);


    });
</script>

{/block}